<template>
	<view class="getRedpackage">
		<!-- <down-load-app-com ></down-load-app-com> -->
		<view class="star-red-package" v-if="PageCur=='star'">
			<view class="status-contents">
			    <view class="status top-view" :style="[{height:statusBar+ 'px'}]"></view>  
			    <view class="title" :style="[{top:statusBar+ 'px'}]">
			        <view class="back-box" @click="back()" :class="[bgShow?'hasBg':'']">
								<image src="/static/images/backwhite.png" class="back" mode=""></image>
							</view>
			    </view>
			</view>
			<!-- :style="{paddingTop:statusBar+'px'}" -->
			<view class="header-banner" >
				<image src="/static/images/bannerbg.png" class="bannerbg" mode="" ></image>
			</view>
			<view class="today-canreceive-info">
				<view class="receive-info-title">
					<view class="broadcast">
						<swiper class="swiper" vertical="true" autoplay="true" interval="2000" circular="true">
								<swiper-item v-for="(item,index) in samples" :key="index" v-if="samples.length>0">
										<view class="swiper-item">
											<image src="/static/images/broadcasticon.png" class="broadcasticon" mode=""></image>
											<view>恭喜{{ item.user.name }}领取红包{{ item.money }}元</view>
										</view>
								</swiper-item>
						</swiper>
					</view>
				</view>
				
				<view class="take-bonus-area">
					<view class="today-can-take">
						<image src="/static/images/today-can-take-bg.png" class="today-can-take-bg" mode=""></image>
						<view class="can-take-num">
							<view>￥</view>
							<view>{{ canReceiveData.today?canReceiveData.today.money:'0.00'}}</view>
						</view>
						<view class="take-bonus-btn" v-if="canReceiveData.today&&canReceiveData.today.taken_at==''&&canReceiveData.today.id!=''&&canReceiveData.today" @click="takeMyBonus()">点击领取</view>
						<view class="taked-bonus-btn" v-if="canReceiveData.today&&canReceiveData.today.taken_at!=''&&canReceiveData.today.id!=''">已领取</view>
						<view class="cant-take-bonus-btn" v-if="!canReceiveData.today" >暂无红包</view>
					</view>
					<view class="tomorrow-waiting-take">
						<image src="/static/images/waiting-can-take-bg.png" class="waiting-can-take-bg" mode=""></image>
						<view class="can-take-num">
							<view>￥</view>
							<view>{{ canReceiveData.tomorrow==0?'0.00':canReceiveData.tomorrow }}</view>
						</view>
						<view class="cant-take-bonus-btn" v-if="canReceiveData.tomorrow==0">暂无红包</view>
						<view class="waiting-take-bonus-btn" v-else >待领取</view>
					</view>
				</view>
				
				<!-- <image src="/static/images/titlebg.png" class="titlebg" mode=""></image>
				<view class="can-receive-num" >
					<text>￥</text>
					<text>{{ canReceiveData.total_money?canReceiveData.total_money:0}}</text>
				</view>
				<view class="receive-button" v-if="canReceive&&!needUpidentity" @click="takeMyBonus()">
					<view class="receive-now">一键领取</view>
				</view>
				<view class="receive-button" v-if="!canReceive&&needUpidentity">
					<view class="up-identity">升级掌柜次日可领取</view>
				</view>
				<view class="receive-button" v-if="!canReceive&&!needUpidentity">
					<view class="received">今日红包已领取</view>
				</view> -->
				<!-- <view class="receive-button" >
					<view class="received" @click="takeMyBonusFuse()" >已启动应急预案，升星立即解除</view>
				</view> -->
				<!-- <view class="upgrade_needs" v-if="user&&user.is_bonus_melted">
					<block v-if="user.grade!='normal'">
						<view class="progress-box">
							<progress :percent="user.new_child_vips_for_melt_dismiss/user.dismiss_melt_needs_children*100" stroke-width="6" active-color="#FF7C31" class="progress" border-radius="10"></progress>
							<view class="grow-up-value-proportion"><text>{{ user.new_child_vips_for_melt_dismiss }}</text><text>/{{ user.dismiss_melt_needs_children }}</text></view>
						</view>
						<view class="grow-up-value">已启动应急预案，新邀6位VIP立即解除</view>
					</block>
				</view> -->
				<!-- <view class="receive-info-item">
					<view class="receive-info-item-title">今日可领取总额</view>
					<view class="receive-info-item-num">{{ canReceiveData.total_money }}元</view>
				</view> -->
				<view class="receive-info-item">
					<view class="receive-info-item-title">到余额</view>
					<view class="receive-info-item-num">{{ canReceiveData.today?canReceiveData.today.to_balance:'0.00' }}元</view>
				</view>
				<view class="receive-info-item">
					<view class="receive-info-item-title">到购物金</view>
					<view class="receive-info-item-num">{{ canReceiveData.today?canReceiveData.today.to_spend:'0.00' }}元</view>
				</view>
				<!-- <view class="receive-info-item">
					<view class="receive-info-item-title">星级红包</view>
					<view class="receive-info-item-num" v-if="canReceiveData.bonus_total_money">{{ canReceiveData.bonus_total_money }}元</view>
					<view class="receive-info-item-num" v-else>0.00元</view>
				</view>
				<view class="receive-info-item">
					<view class="receive-info-item-title">星级贡献奖</view>
					<view class="receive-info-item-num" v-if="canReceiveData.prize_total_money">{{ canReceiveData.prize_total_money }}元</view>
					<view class="receive-info-item-num" v-else>0.00元</view>
				</view> -->
				<view class="receive-info-item receive-info-item-last">
					<view class="receive-info-item-title">我的累计红包收入</view>
					<view class="receive-info-item-num" v-if="user">{{ (Number(user.dividend_bonus)  +  Number(user.dividend_spend)).toFixed(2) }}元</view>
				</view>
			</view>
			<view>
				<image src="/static/images/calledbanner.png" class="calledbanner" @click="callFriend()" mode=""></image>
			</view>
			<view class="distribution-rules">
				<view class="distribution-rules-title">
					<view>红包分配规则</view>
				</view>
				<view class="distribution-rules-content">平台每天给活跃的VIP用户发放红包，您所获得的红包金额根据活跃度、浏览频次、在线时长、下单量、购物总额等指标综合计算得出。</view>
			</view>
		</view>
		
		<view class="goodredpacket" v-if="PageCur=='goodsred'">
			<view class="status-contents">
			    <view class="status top-view" :style="[{height:statusBar+ 'px'}]"></view>  
			    <view class="title" :style="[{top:statusBar+ 'px'}]">
			        <view class="back-box" @click="back()" :class="[bgShow?'hasBg':'']">
								<image src="/static/images/backwhite.png" class="back" mode=""></image>
							</view>
			    </view>
			</view>
			<view>
				<view class="status-relative" :style="[{height:statusBar+ 'px'}]"></view>
				<view style="height: 88rpx;width:100%;"></view>
			</view>
			<view class="top-bg"></view>
			<view class="data-box">
				<view class="settlement-packet-box">
					<view class="waiting-settlement">
						<view class="waiting-settlement-title">
							<view class="waiting-settlement-title-text">待结算平台奖励红包(元)</view>
							<!-- <image src="/static/images/common/openEyes.png" mode="" ></image> -->
							<!-- <image src="/static/images/common/closeEyes.png" mode="" v-else @tap="openEyes"></image> -->
							<view  class="settlement-info" @tap="toSettlementInfo">结算明细</view>
						</view>
						<view class="waiting-settlement-num">{{ estimateData.waitting_settle_child_bought }}</view>
					</view>
					<!-- <view class="red-packet-type">
						<view class="red-packet-self">
							<view class="red-packet-type-item">平台奖励红包</view>
							<view class="red-packet-type-item-num">{{ estimateData.waitting_settle_child_bought ==0?'0':estimateData.waitting_settle_child_bought }}</view>
						</view>
						<view>
							<view class="red-packet-type-item">平台奖励红包</view>
							<view class="red-packet-type-item-num">{{ estimateData.waitting_settle_child_bought == 0?'0':estimateData.waitting_settle_child_bought }}</view>
						</view>
					</view> -->
					<view class="tips">1. 结算后金额转入钱包余额</view>
					<view class="tips">2. 每个月25日自动结算上个自然月的平台奖励红包收入</view>
				</view>
				<view class="today-estimate">
					<view class="big-item-title">预估平台奖励红包(元)</view>
					<view class="item">
						<view class="item-title">今日预估平台奖励红包(元)</view>
						<view class="item-num">{{ estimateData.day_estimate_child  }}</view>
					</view>
					<view class="item">
						<view class="item-title">本月预估平台奖励红包(元)</view>
						<view class="item-num">{{ estimateData.month_estimate_child }}</view>
					</view>
				</view>
				
				<view class="red-packet-settlement">
					<view class="big-item-title">红包结算(元)</view>
					<view class="item">
						<view class="item-title">上月平台奖励红包结算</view>
						<view class="item-num item-num1">{{ estimateData.last_settled_child==0?'0' :  estimateData.last_settled_child  }}</view>
					</view>
					<view class="item">
						<view class="item-title">累计平台奖励红包结算</view>
						<view class="item-num item-num1">{{ estimateData.all_settled_child==0?'0' :  estimateData.all_settled_child  }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="webtips">--此网页由<text style="margin:0 10rpx">shopwap.littleshop.shop</text>提供--</view>
		
		
		<!-- ye-nei-tabbar -->
		<view class="cu-bar tabbar  shadow foot">
			<view class="action" @click="NavChange" data-cur="star">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/images/tabbar-icons/star_bonus' + [PageCur=='star'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='star'?'text-green':'text-gray'">VIP红包</view>
			</view>
			<view class="action" @click="NavChange" data-cur="goodsred">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/images/tabbar-icons/bonus' + [PageCur == 'goodsred'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='component'?'text-green':'text-gray'">平台奖励红包</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import { checkMyPendingBonus,getLastPendingBonus,getPendingBonusSamples,takeMyPendingBonus,bonusCheckingBeforeTaking } from "api/pendingBonusApi"
	import { getUser } from "api/userApi"
	import { getBrokeragesCount } from "api/userBrokeragesCountApi"
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import AuthChecking from "mixins/AuthChecking"
	// import CurrentUser from "mixins/CurrentUser"
	export default {
		store,
		data() {
			return {
				samples:[],
				canReceive:false,
				needUpidentity:true,
				canReceiveData:{},
				bgShow:false,
				statusBar:0,
				PageCur: 'star',
				estimateData:{}
			}
		},
		mixins: [
			AuthChecking,
			// CurrentUser
		],
		computed:{
			...mapGetters([
				'user',
				'isLogin'
			])
		},
		async onShow() {
			await this.bonusCheckingBeforeTaking()
			await this.getUser()
			
		},
		methods: {
			...mapMutations([
				'setUser'
			]),
			async NavChange(e) {
				this.PageCur = e.currentTarget.dataset.cur;
				uni.pageScrollTo({scrollTop: 0,duration:0})
				if(this.PageCur == 'goodsred'){
					let estimateData  = await getBrokeragesCount()
					this.estimateData = estimateData
				}else{
					await this.bonusCheckingBeforeTaking()
					await this.getUser()
				}
			},
			toSettlementInfo(){
				uni.navigateTo({url: `/packs/pages/settlementinfo/settlementinfo`})
			},
			back(){
				uni.navigateBack({})
			},
			callFriend(){
				uni.navigateTo({
					url:'/packs/pages/callFriend/callFriend'
				})
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async loadBonusSamples() {
				const response = await getPendingBonusSamples({ include: 'user'})
				this.samples = response.data
			},
			async bonusCheckingBeforeTaking(){
				uni.showLoading({title: '加载中'})
				setTimeout(()=>{
					uni.hideLoading()
				},800)
				let response = await bonusCheckingBeforeTaking()
				if(Object.keys(response).length > 0){
					this.canReceiveData = response;
				}else{
					// this.canReceiveData = {
					// 	id:'',
					// 	money:0,
					// 	to_balance:0,
					// 	to_spend:0,
					// 	taken_at:'',
					// 	tomorrow_money:0
					// }
				}
			},
			async checkMyPendingBonus(){
				uni.showLoading({title: '加载中'})
				setTimeout(()=>{
					uni.hideLoading()
				},800)
				let res = await checkMyPendingBonus()
				if(Object.keys(res).length > 0){
					this.canReceiveData = res;
					this.canReceive = res.can_be_taken;
					this.needUpidentity = false
				}else{
					let response = await getLastPendingBonus()
					this.canReceiveData = response
					this.needUpidentity = true
				}
			},
			async takeMyBonus() {
				if(await this.isLogin){					
					let id = this.canReceiveData.today.id;
					await takeMyPendingBonus(id)
					uni.showModal({
						title: '提示',
						content: '今日分红领取成功',
						showCancel: false
					})
					await this.bonusCheckingBeforeTaking()
				}else{
					uni.navigateTo({
						url: `/packs/pages/auth/auth?from=getredpackage`
					})
				}
			},
			takeMyBonusFuse(){
				uni.showModal({
					title: '提示',
					content: '已启动应急预案，升星立即解除',
					showCancel: false
				})
			}
		},
		filters:{
			brokerageNum(number){
				 return Number(number).toFixed(2)
			}
		},
		onPageScroll(e){
			if(e.scrollTop>80){
				this.bgShow = true
			}else{
				this.bgShow = false
			}
		},
		async onReady(){
			await this.loadBonusSamples()
		}
	}
</script>

<style scoped lang="scss">
	@import "/colorui/main.css";
	@import "/colorui/icon.css";
	page{
		background: #FDF6E4;
	}
	.getRedpackage{
		padding-bottom:150rpx;
		position: relative;
		min-height:93vh;
	}
	.top-view{  
		width: 100%;  
		position: fixed;  
		top:0;  
		z-index: 9999;
	}  
	.status{  
		width: 100%;
	}
	.title{
		width: 100%;
		height: 88rpx;
		position: fixed;  
		background:rgba(0,0,0,0);
		z-index: 9999;
		display: flex;
		align-items: center;
	}
	.back-box{
		width: 60rpx;
		height:60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin:20rpx 0 0 10rpx;
		>image{
			display: block;
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 4rpx;
		}
	}
	.hasBg{
		background: rgba(0,0,0,0.3);
	}
	
	.header-banner{
		width: 100%;
		height: 410rpx;
		position:relative;
	}
	.bannerbg{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		left:0;
		top:0;
	}
	.broadcast{
		width: 686rpx;
		height:80rpx;
		border-radius:32rpx;
		position: absolute;
		left: 0;
		bottom:0rpx;
	}
	.swiper{
		height: 80rpx;
	}
	.swiper-item{
		height: 80rpx;
		display:flex;
		align-items: center;
		>view{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			width:580rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		.broadcasticon{
			display: block;
			width: 32rpx;
			height: 32rpx;
			margin:0 16rpx 0 32rpx;
		}
	}
	
	.today-canreceive-info{
		width: 686rpx;
		padding-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin:24rpx auto 0;
	}
	.receive-info-title{
		width: 100%;
		height: 80rpx;
		background: #001000;
		line-height: 80rpx;
		color: #00F6A5;
		border-radius: 32rpx 32rpx 0 0;
		position: relative;
	}
	.titlebg{
		display: block;
		width: 492rpx;
		height: 108rpx;
		margin: 40rpx auto 0;
	}
	.can-receive-num{
		display: flex;
		align-items: baseline;
		justify-content: center;
		>text:nth-child(1){
			font-size:40rpx;
			color:#FF6000;
			font-weight: 600;
		}
		>text:nth-child(2){
			font-size:80rpx;
			color:#FF6000;
			font-weight: 600;
			line-height: 112rpx;
		}
	}
	.receive-button{
		width: 508rpx;
		height: 86rpx;
		background: url(../../../static/images/receivebtnbg.png) no-repeat center;
		background-size: cover;
		margin: 40rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
	}
	.up-identity{
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.received{
		width: 100%;
		height: 100%;
		background: #CECECE;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 43rpx;
	}
	.receive-now{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
	}
	.receive-info-item{
		display: flex;
		justify-content: space-between;
		width: 606rpx;
		margin: 0 auto;
		height:70rpx;
		align-items: center;
	}
	.receive-info-item-title{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.receive-info-item-num{
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	.receive-info-item-last{
		border-top: 1rpx solid #F0F0F0;
	}
	.calledbanner{
		display: block;
		width:686rpx;
		height: 176rpx;
		margin:24rpx auto 0;
	}
	.distribution-rules{
		width: 686rpx;
		margin: 24rpx auto 48rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.distribution-rules-title{
		width: 686rpx;
		height: 80rpx;
		background: url(../../../static/images/jianbiantitlebg.png) no-repeat center;
		background-size: cover;
		>view{
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 44rpx;
			margin-left:40rpx;
			padding-top: 40rpx;
			
		}
	}
	.distribution-rules-content{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 44rpx;
		padding:28rpx 40rpx  40rpx 40rpx;
	}
	.webtips{
		position: absolute;
		left:0;
		bottom:120rpx;
		width: 100%;
		height: 40rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: center;
	}
	.cu-bar{
		background:#FFFFFF;
	}
	
	
	.goodredpacket{
		min-height: 100vh;
	}
	.data-box{
		position: relative;
		z-index: 1;
		padding-bottom: 100rpx;
	}
	.top-bg{
		width: 750rpx;
		height: 414rpx;
		background: linear-gradient(180deg, #FE6430 0%, rgba(254, 100, 48, 0) 100%);
		position: fixed;
		left:0;
		top:0;
		z-index:0;
	}
	.settlement-packet-box{
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin:36rpx auto 0;
		padding-bottom: 32rpx;
	}
	.waiting-settlement-title{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left:48rpx;
		padding-top: 48rpx;
		image{
			display: block;
			width: 32rpx;
			height: 32rpx;
			margin-left: 16rpx;
		}
	}
	.waiting-settlement{
		margin-bottom: 15rpx;
	}
	.settlement-info{
		margin-left: 200rpx;
	}
	.waiting-settlement-num{
		font-size: 64rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #FF4924;
		
		margin-left: 48rpx;
	}
	.red-packet-type{
		display: flex;
		margin: 32rpx 0 64rpx 0;
		.red-packet-self{
			margin:0 168rpx 0 48rpx;
		}
		>view{
			>view:nth-child(1){
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			>view:nth-child(2){
				font-size: 48rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #333333;
				line-height: 56rpx;
				margin-top: 8rpx;
			}
		}
	}
	.tips{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34rpx;
		margin-left: 48rpx;
	}
	.today-estimate,.month-estimate{
		width: 686rpx;
		padding:32rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin:16rpx auto 16rpx;
	}
	.red-packet-settlement{
		width: 686rpx;
		padding:32rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin:16rpx auto 16rpx;
	}
	.big-item-title{
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 44rpx;
	}
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:36rpx;
	}
	.item-title{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.item-num{
		font-size: 40rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #333333;
		color: #FF4924;
		
	}
	.item-num1{
		color: #FF4924;
	}
	.progress{
		width:356rpx;
	}
	.upgrade_needs{
		width: 508rpx;
		
		margin:0 auto;
		.grow-up-value{
			font-size: 26rpx;
			text-align: center;
			margin-bottom: 40rpx;
			color: #FF6000;
			color: red;
		}
		.progress-box{
			display: flex;
			justify-content: center;
			margin-bottom: 15rpx;
			.grow-up-value-proportion{
				font-size: 28rpx;
				margin-left: 20rpx;
				font-weight: 500;
				>text:nth-child(1){
					color:#FF7C31;
					font-size: 32rpx;
				}
			}
		}
	}
	.uni-progress-bar {  
	    border-radius: 10rpx;  
	    }  
	.uni-progress-inner-bar {  
	    border-radius: 10rpx;  
	}
	.take-bonus-area{
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		margin: 32rpx 0;
		>view{
			width: 290rpx;
			height: 400rpx;
			background: #FEF3F1;
			border-radius: 32rpx;
			border: 2rpx solid #FEEAE1;
		}
	}
	.today-can-take-bg,.waiting-can-take-bg{
		display: block;
		width: 100%;
		height: 84rpx;
		margin-top: 32rpx;
	}
	.can-take-num{
		height: 66rpx;
		display: flex;
		// align-items: flex-end;
		justify-content: center;
		margin-top: 52rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-weight: 400;
			color: #FF6000;
			line-height:28rpx;
			margin-top: 14rpx;
		}
		>view:nth-child(2){
			font-size: 48rpx;
			font-weight: 600;
			color: #FF6000;
			line-height: 48rpx;
		}
	}
	.take-bonus-btn{
		width: 220rpx;
		height: 68rpx;
		background: linear-gradient(90deg, #FF6900 0%, #FF2E00 100%);
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin: 64rpx auto;
	}
	.taked-bonus-btn{
		width: 220rpx;
		height: 68rpx;
		background: #E3BCBC;
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin: 64rpx auto;
	}
	.cant-take-bonus-btn{
		width: 220rpx;
		height: 68rpx;
		background: #CCCCCC;
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin: 64rpx auto;
	}
	.waiting-take-bonus-btn{
		width: 220rpx;
		height: 68rpx;
		background: #FFE2E3;
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 600;
		color: #FF203B;
		margin: 64rpx auto;
	}
	
</style>
